<template>
  <el-container style="height: 100vh;">
    <el-aside width="200px" style="background-color: #f5f5f5;">
      <el-menu router :default-active="$route.path" class="el-menu-vertical-demo">
        <el-menu-item index="/">
          <el-icon><Monitor /></el-icon>
          <span>任务面板</span>
        </el-menu-item>
        <el-menu-item index="/logs">
          <el-icon><Document /></el-icon>
          <span>执行日志</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header :class="{ 'dark-header': isDark }" style="background-color: #fff; padding: 0 20px; border-bottom: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center;">
        <h1 :class="{ 'dark-title': isDark }" style="line-height: 60px; margin: 0;">定时任务控制面板</h1>
        <el-button @click="toggleTheme" circle :title="isDark ? '切换为日间模式' : '切换为夜间模式'">
          <el-icon v-if="isDark"><Sunny /></el-icon>
          <el-icon v-else><Moon /></el-icon>
        </el-button>
      </el-header>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Monitor, Document, Tools, Warning, Sunny, Moon } from '@element-plus/icons-vue'

const isDark = ref(false)

// 初始化时检测本地存储或系统主题
onMounted(() => {
  const saved = localStorage.getItem('theme')
  if (saved) {
    isDark.value = saved === 'dark'
  } else {
    // 跟随系统
    isDark.value = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
  }
  updateTheme()
})

function toggleTheme() {
  isDark.value = !isDark.value
  localStorage.setItem('theme', isDark.value ? 'dark' : 'light')
  updateTheme()
}

function updateTheme() {
  const html = document.documentElement
  if (isDark.value) {
    html.classList.add('dark')
  } else {
    html.classList.remove('dark')
  }
}
</script>

<style scoped>
/* 夜间模式样式 */
html.dark {
  --el-bg-color: #1a1a1a;
  --el-bg-color-page: #121212;
  --el-text-color-primary: #f5f5f5;
}

/* 顶部导航样式 */
el-header {
  transition: background-color 0.3s ease;
}

html.dark el-header {
  background-color: #2d2d2d;
  border-bottom-color: #444;
}

/* 侧边栏样式 */
.sidebar-container {
  transition: background-color 0.3s ease, color 0.3s ease;
}

html.dark .sidebar-container {
  background-color: #2d2d2d;
  color: #f5f5f5;
}

/* 侧边栏菜单项样式 */
html.dark .el-menu {
  background-color: #2d2d2d;
  color: #f5f5f5;
}

html.dark .el-menu-item, html.dark .el-submenu__title {
  color: #f5f5f5;
}

html.dark .el-menu-item:hover, html.dark .el-submenu__title:hover {
  background-color: #3d3d3d;
}

html.dark .el-menu-item.is-active {
  background-color: #409eff;
  color: white;
}
</style>

<style scoped>
/**** 新增夜间模式标题和header样式 ****/
.dark-header {
  background-color: #2d2d2d !important;
  border-bottom-color: #444 !important;
}
.dark-title {
  color: #f5f5f5 !important;
}
.el-header {
  height: 60px !important;
  line-height: 60px;
}

.el-container { 
  height: 100%; 
}

.el-menu-vertical-demo {
  height: 100%;
  border-right: none;
}
</style>
